﻿@model MAPDavy.WebMVC3.ViewModels.RegistrarRitViewModel

@{
    ViewBag.Title = "RegistarRit";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@section JavaScript{
    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.tmpl.js")" type="text/javascript"></script>    

    <script type="text/x-jquery-tmpl" id="studentTemplate">
        <tr>
            <td>                
                ${StudentId}
            </td>
            <td>
                ${Student}
            </td>
            <td>
                <input type="hidden" id="ScoreId[${MatriculaId}]" name="ScoreId[${MatriculaId}]"  value="${ScoreId}" />
                <input type="hidden" id="MatriculaId[${MatriculaId}]" name="MatriculaId[${MatriculaId}]"  value="${MatriculaId}" />
                <input type="hidden" id="TestGradeId[${MatriculaId}]" name="TestGradeId[${MatriculaId}]"  value="${TestGradeId}" />
                <input type="text" id="rit[${MatriculaId}]" name="rit[]" value="${RIT}" class="rit required" />
                <span class="field-validation-valid" data-valmsg-for="rit[]" data-valmsg-replace="false">*</span>
            </td>
        </tr>
    </script> 

    <script type="text/javascript">
        $(document).ready(function () {

            $("#students thead tr th").addClass("ui-widget ui-widget-header");
            $('.studentName').width('450px');

            $('#pnlAlumnos').hide('slow');
            $('#btnRegistarRIT').hide('slow');

            $("#btnLoadStudents").click(function () {
                $('#pnlAlumnos').show('slow');
                $('#Test').attr('disabled', 'true');

                var _termId = $("#TermId").val();
                var _seccionId = $("#SeccionId").val();
                var _testId = $("#Test").val();

                $.post(
                      '@Url.Action("GetScoreServiceJson", "Score")',
                      { termId: _termId, seccionId: _seccionId, testId: _testId },
                      function (data) {
                          $("#students tbody tr").remove();
                          $("#studentTemplate").tmpl(data).appendTo("#students tbody").fadeIn("slow");

                          $('.rit').width('50px');

                          $("#students tbody tr").hover(
                              function () {
                                  $(this).addClass("ui-state-highlight");
                              },
                              function () {
                                  $(this).removeClass("ui-state-highlight");
                              });

                          $(".rit").keydown(function (event) {
                              var keyCode = event.keyCode;
                              if (keyCode < 48 || keyCode > 57) {
                                  if (keyCode < 96 || keyCode > 105) {
                                      if (keyCode == 8 || keyCode == 9) {
                                          $(this).removeClass("input-validation-error");
                                      }
                                      else {
                                          event.preventDefault();
                                          $(this).addClass("input-validation-error");
                                      }
                                  }

                              }
                          });

                          $('.rit').keyup(function (event) {
                              if ($(this).val() != "") {
                                  if ($(this).val() < 0 || $(this).val() > 250) {                                      
                                      $(this).addClass("input-validation-error");                                     
                                      $(this).simpletip({                                          
                                          content: 'El Rit debe estar entre 0 y 250'
                                      });
                                  }
                                  else {
                                      $(this).removeClass("input-validation-error");
                                  }
                              }
                          });

                          $('#btnRegistarRIT').show('slow');
                      },
                      "json"
                     );
            });

            $("#btnSelectTest").click(function () {
                $('#pnlAlumnos').hide('slow');
                $('#Test').removeAttr('disabled');
                $('#btnRegistarRIT').hide('slow');
            });

            $("#studentsForm").validate({
                onkeyup: true,
                onblur: true,
                rules: {
                    "rit[]": { required: false, number: true, min: 0, max: 300 }
                },
                messages: {
                    "rit[]": {
                        required: "El valor ingresado no es válido",
                        number: "Error: Campo numérico."
                    }
                },
                errorPlacement: function (error, element) {
                    tr = element.parents("tr");
                    error.appendTo(tr.find("td:eq(2)"));
                }
            });

            $("#btnRegistarRIT").click(function () {

                var sinErrores = true;

                $("#students tbody tr td:nth-child(3)").each(function (index, element) {


                    $("#btnRegistarRIT").attr('disabled', 'true');
                    $("#btnLoadStudents").attr('disabled', 'true');
                    $("#btnSelectTest").attr('disabled', 'true');

                    var _rit = $(element).find("input:eq(3)").val();

                    $(element).find("img").remove();
                    $(element).removeClass("ui-state-highlight");

                    if (_rit != "") {
                        if (_rit < 0 || _rit > 300) {
                            sinErrores = false;
                            $(element).find("input:eq(3)").addClass("input-validation-error");
                            $(element).append('<img src="@Url.Content("~/Content/images/unchecked.gif")" title="El Rit debe estar entre 0 y 250" alt="El Rit debe estar entre 0 y 250" /></a>');
                            $(element).find("input:eq(3)").simpletip({
                                fixed: true,
                                position: 'right',
                                content: 'El Rit debe estar entre 0 y 300'
                            });
                        }
                    }
                });

                if (sinErrores) {
                   
                    $("#students tbody tr td:nth-child(3)").each(function (index, element) {             

                    $("#btnRegistarRIT").attr('disabled', 'true');
                    $("#btnLoadStudents").attr('disabled', 'true');
                    $("#btnSelectTest").attr('disabled', 'true');

                    var _scoreId = $(element).find("input:eq(0)").val();
                    var _matriculaId = $(element).find("input:eq(1)").val();
                    var _testGradeId = $(element).find("input:eq(2)").val();
                    var _rit = $(element).find("input:eq(3)").val();

                    $(element).find("img").remove();

                    $.post('@Url.Action("RegistarRit", "Score")',
                        { testGradeId: _testGradeId, scoreId: _scoreId, matriculaId: _matriculaId, rit: _rit },
                        function (data) {
                            if (data) {
                                if (data.exito) {
                                    $(element).find("input:eq(0)").val(data.escoreUP.Id);
                                    if (data.escoreUP.RIT != null) {
                                        $(element).append('<img src="@Url.Content("~/Content/images/checked.gif")" title="Guardado Correctamente" alt="Guardado Correctamente" /></a>');
                                    }
                                    else {
                                        $(element).append('<img src="@Url.Content("~/Content/images/unchecked.gif")" title="RIT no Asignado" alt="RIT no Asignado" /></a>');
                                    }
                                }
                            }
                        },
                        "json"
                    );

                    });
                }

                $(this).removeAttr('disabled');
                $("#btnLoadStudents").removeAttr('disabled');
                $("#btnSelectTest").removeAttr('disabled');
            });

        });
    </script>  
           
}
<div class="cpanel ui-widget ui-widget-content ui-corner-all">
    <table class="toolbar">
        <tr>
            <td valign="middle" >
                <img src="@Url.Content("~/Content/images/rit.png")" alt="evaluaciones" />
            </td>
            <td class="tdHeader"><span class="header">Registrar RIT</span></td>
            @if (!Model.Term.Cerrado)
            {           
            <td class="cerrado"><center>
                <a href="#" id="btnRegistarRIT">
                   <img src="@Url.Content("~/Content/images/save.png")" title="Guardar" alt="Guardar" />
                    <br /><span class="label">Guardar</span>
                </a></center>
            </td>
            }
            <td><center>
                <a href="@Url.Action("Index", "Term")">
                    <img src="@Url.Content("~/Content/images/back.png")" title="Candelar" alt="Candelar" />
                    <br /><span class="label">Cancelar</span>
                </a></center>
            </td>
        </tr>
    </table>
</div>
<div id="ttl" class = "titleView ui-widget ui-widget-content ui-corner-all">
    @Html.Hidden("TermId",Model.Term.Id   )
    @Html.Hidden("Anio",Model.Term.Anio )
    @Html.Hidden("GradeId",ViewData["GradeId"]  )
    @Html.Hidden("SeccionId",Model.SeccionTutor.SeccionId  )

    <table class="ritt">
        <tr>
            <td>
               <b>Test:</b> 
            </td>
            <td colspan="3">
                @Html.DisplayFor(model => model.Term.NameTerm) -  @Html.DisplayFor(model => model.Term.MAP.NameMap)
            </td>
        </tr>
        <tr>
            <td>
                <b>Grade:</b>
            </td>
            <td>
                @Html.DisplayFor(model => model.SeccionTutor.Seccion.Grade.GradeLevel)
            </td>
            <td>
                <b>Class Name:</b>
            </td>
            <td>
                @Html.DisplayFor(model => model.SeccionTutor.Seccion.ClassName)
            </td>
        </tr>
        <tr>
            <td>
                <b>Tutor:</b>
            </td>
            <td colspan="3">
                @Html.DisplayFor(model => model.SeccionTutor.Tutor.LastName), @Html.DisplayFor(model => model.SeccionTutor.Tutor.FirtsName)
            </td>
        </tr>
    </table> 
</div>
<div id="ttl2" class = "titleView ui-widget ui-widget-content ui-corner-all">
    <b>Subject: </b> @Html.DropDownList("Test") 
    <button id="btnLoadStudents">Cargar Alumnos</button> 
    <button id="btnSelectTest">Seleccionar otro Test</button>
</div>
<br/>
<div id="pnlAlumnos" >
<form id="studentsForm" action="">
 <table id="students" >
    <thead>
        <tr>
            <th>
                Student Id
            </th>
            <th class="studentName">
                Student
            </th>
            <th>
                <center>
                    RIT
                </center>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <input type="hidden" id="ScoreId[${MatriculaId}]" name="ScoreId[${MatriculaId}]"  value="${ScoreId}" />
                <input type="hidden" id="MatriculaId[${MatriculaId}]" name="MatriculaId[${MatriculaId}]"  value="${MatriculaId}" />
                ${"StudentId"}
            </td>
            <td>
                ${Student}
            </td>
            <td>
                <input type="text" id="rit[${MatriculaId}]" name="rit[${MatriculaId}]" value="${RIT}" class="rit required" />
            </td>
        </tr>
    </tbody>    
</table>
</form>
</div>